<template>
  <view class="about-container">
    <!-- 顶部导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left" @click="navigateBack">
        <FeatherIcon name="chevron-left" size="24" color="#333"></FeatherIcon>
      </view>
      <text class="navbar-title">关于APP</text>
      <view class="navbar-right"></view>
    </view>

    <!-- APP Logo和标题 -->
    <view class="app-header">
      <image class="app-logo" src="/static/fishPiLogo.png" mode="aspectFit"></image>
      <text class="app-name">{{ APP_INFO.name }}</text>
      <text class="app-version">版本: {{ currentVersion }}</text>
    </view>

    <!-- 内容卡片 -->
    <view class="content-card">
      <view class="card-section">
        <text class="section-title">开发者信息</text>
        <view class="section-content">
          <view class="author-row">
            <text class="author-label">作者: </text>
            <text class="author-name clickable" @click="navigateToUserDetail('otis1026')">{{ APP_INFO.author }}</text>
          </view>
        </view>
      </view>

      <view class="divider"></view>

      <view class="card-section">
        <text class="section-title">开发初心</text>
        <view class="section-content">
          <text class="section-text">
            希望通过本客户端，为摸鱼派社区提供更便捷的移动访问体验。让用户随时随地都能够参与社区讨论，分享观点，结交朋友。
          </text>
        </view>
      </view>

      <view class="divider"></view>

      <view class="card-section">
        <text class="section-title">关于摸鱼派</text>
        <view class="section-content">
          <text class="section-text">
            摸鱼派是以 摸鱼 为核心设计语言，黑客 / 画家 为用户定位的摸鱼社区。
            在摸鱼派，你可以畅所欲言，聊技术、家常、时事，无论是发帖探讨还是聊天室在线聊天；我们还提供了很多烧脑的小游戏，非常卷的排行榜，欢迎在
            鱼游 的社区游戏中卷来卷去 😄
          </text>
          <text class="section-text sub-text">
            希望你会喜欢这里！希望大家可以一起维护摸鱼派，帮助这里变得更好 ❤️
          </text>
        </view>
      </view>
    </view>

    <!-- 链接区域 -->
    <view class="links-card">
      <view class="link-item" @click="openPrivacyPolicy">
        <text class="link-text">隐私政策</text>
        <FeatherIcon name="chevron-right" size="18" color="#999"></FeatherIcon>
      </view>

      <view class="link-item" @click="navigateToFeedback">
        <text class="link-text">问题反馈</text>
        <FeatherIcon name="chevron-right" size="18" color="#999"></FeatherIcon>
      </view>

      <view class="link-item" @click="openAboutFishpi">
        <text class="link-text">关于摸鱼派</text>
        <FeatherIcon name="chevron-right" size="18" color="#999"></FeatherIcon>
      </view>
    </view>

    <!-- 底部版权 -->
    <view class="footer">
      <text class="footer-text">{{ copyright }}</text>
      <text class="icp-text" @click="openICP">京ICP备2022000226号-2A</text>
    </view>
  </view>
</template>

<script setup>
  import { ref } from "vue";
  import FeatherIcon from "@/components/FeatherIcon.vue";
  import { APP_INFO, getAppVersion } from "@/config/app";

  // 当前版本号
  const currentVersion = getAppVersion();
  // 当前年份 - 使用APP_INFO中的copyright
  const copyright = APP_INFO.copyright;

  // 返回上一页
  const navigateBack = () => {
    uni.navigateBack();
  };

  // 打开隐私政策
  const openPrivacyPolicy = () => {
    uni.navigateTo({
      url:
        "/pages/webview/webview?url=" +
        encodeURIComponent("https://fishpi.cn/privacy"),
    });
  };

  // 打开关于摸鱼派
  const openAboutFishpi = () => {
    uni.navigateTo({
      url:
        "/pages/webview/webview?url=" +
        encodeURIComponent("https://fishpi.cn/about"),
    });
  };

  // 跳转到用户详情页
  const navigateToUserDetail = (username) => {
    uni.navigateTo({
      url: `/pages/user/user-profile?username=${username}`,
    });
  };

  // 跳转到问题反馈页面
  const navigateToFeedback = () => {
    uni.navigateTo({
      url: "/pages/feedback/feedback-list",
    });
  };

  // 打开备案查询页面
  const openICP = () => {
    uni.navigateTo({
      url:
        "/pages/webview/webview?url=" +
        encodeURIComponent("https://beian.miit.gov.cn/"),
    });
  };
</script>

<style lang="scss">
  .about-container {
    background-color: #f8f9fa;
    padding-bottom: 40rpx;
  }

  .custom-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--status-bar-height, 25px) + 22px);
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    z-index: 999;
    padding-top: var(--status-bar-height, 15px);
    display: flex;
    align-items: center;

    .navbar-left {
      width: 90rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .navbar-title {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }

    .navbar-right {
      width: 90rpx;
    }
  }

  .app-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40rpx;
    padding-top: calc(var(--status-bar-height, 25px) + 44px + 30rpx);

    .app-logo {
      width: 160rpx;
      height: 160rpx;
      margin-bottom: 20rpx;
      border-radius: 30rpx;
    }

    .app-name {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }

    .app-version {
      font-size: 26rpx;
      color: #999;
    }
  }

  .content-card {
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
    padding: 30rpx;
    margin: 0 30rpx 30rpx;

    .card-section {
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
        display: block;
      }

      .section-content {
        .author-row {
          display: flex;
          align-items: baseline;
          margin-bottom: 20rpx;
        }

        .author-label {
          font-size: 28rpx;
          color: #666;
          line-height: 1.6;
        }

        .author-name {
          font-size: 28rpx;
          color: #666;
          line-height: 1.6;
          margin-left: 4rpx;

          &.clickable {
            text-decoration: underline;
            color: #4a86e8;
          }
        }

        .section-text {
          font-size: 28rpx;
          color: #666;
          line-height: 1.6;
          display: block;
          margin-bottom: 20rpx;

          &:last-child {
            margin-bottom: 0;
          }

          &.sub-text {
            font-size: 26rpx;
            color: #999;
            margin-top: 10rpx;
          }
        }
      }
    }

    .divider {
      height: 1px;
      background-color: #f0f0f0;
      margin: 30rpx 0;
    }
  }

  .links-card {
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin: 0 30rpx;

    .link-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .link-text {
        font-size: 28rpx;
        color: #333;
      }
    }
  }

  .footer {
    margin-top: 60rpx;
    text-align: center;

    .footer-text {
      font-size: 24rpx;
      color: #999;
    }

    .icp-text {
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
      display: block;
    }
  }
</style>